﻿@{
    ViewBag.Navi = "#ui-save";
    Layout = "~/Views/Shared/_User.cshtml";
}

<script type="text/javascript">
    $(function () {
        $("#btnPay").click(function () {
            window.location.href = "/user/deposit";
        });


        //         二列卡片切换
        //Default Action 
        $(".tab2_content").hide(); //Hide all content
        $("ul.tabs li:first").addClass("c").show(); //Activate first tab 
        $(".tab2_content:first").show(); //Show first tab content 
        //On Click Event 
        $("ul.tabs li").click(function () {
            $("ul.tabs li").removeClass("c"); //Remove any "active" class 
            $(this).addClass("c"); //Add "active" class to selected tab 
            $(".tab2_content").hide(); //Hide all tab content 
            var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
            $(activeTab).show(); //Fade in the active content 
            return false;
        });
    });
</script>

<div class="myhome_center" style="width: 720px;">
    <div class="full">
        <div class="tou">
            <h2>
                账户储蓄</h2>
        </div>
        <div class="overage" id="">
            当前您的账户余额:<strong>￥229.90</strong><input id="btnPay" type="button" value="充值" class="btnPay ui-icons" />
            锁定余额:<strong>￥0.00</strong> 帐户状态：<strong>有效</strong>
        </div>
        <div class="overage" id="">
            您当前共有<strong>2</strong>张可用红包
        </div>
        <div class="overage" id="">
            实际消费额:<strong>￥2,299.00</strong> <a href="">查看您的会员级别</a>
        </div>
        <div class="form">
            <div class="introduc_info-usr">
                <div class="tab2_area">
                    <ul class="tab2_head tabs">
                        <li class=""><a href="#tab1">充值</a></li>
                        <li class=""><a href="#tab2">红包</a></li>
                        <li class=""><a href="#tab3">消费</a></li>
                    </ul>
                </div>
                <div class="tab2_container">
                    <div class="introduc_area tab2_content" id="tab1">
                    
                        @(Html.Telerik().Grid<dynamic>()
                            .Name("Grid")
                            .Columns(c =>
                            {
                              
                                c.Bound("Date")
                                    .Title("时间")
                                    .Format("{0:yyyy-MM-dd HH:mm}");

                                c.Bound("Data3")
                                    .Title("支出")
                                    .Format("-￥{0}");

                                c.Bound("Data4")
                                    .Title("存入")
                                    .Format("￥{0}");

                                c.Bound("Id")
                                    .Title("备注")
                                    .ClientTemplate("订单号：81651853，充值229.9000元<br />合计229.9000元");

                            })
                            .DataBinding(binding => binding.Ajax().Select("_GetSampleData", "Sample"))
                            .Sortable()
                            .Pageable(p => p.PageSize(10))

                        )
                     

                    </div>
                    <div class="introduc_area tab2_content" id="tab2">

                       @(Html.Telerik().Grid<dynamic>()
                            .Name("Grid2")
                            .Columns(c =>
                            {
                              

                                c.Bound("Id")
                                    .Title("编号");

                                c.Bound("Data4")
                                    .Title("面值")
                                    .Format("￥{0}");

                                c.Bound("Data3")
                                    .Title("所需消费金额")
                                    .Format("￥{0}");
                                
                                c.Bound("Date")
                                    .Title("有效期")
                                    .Format("即日至{0:yyyy-MM-dd}");

                                c.Bound("Id")
                                    .Title("使用限制")
                                    .ClientTemplate("全品类");

                            })
                            .DataBinding(binding => binding.Ajax().Select("_GetSampleData", "Sample"))
                            .Sortable()
                            .Pageable(p => p.PageSize(10))

                        )
                   
                    </div>
                    <div class="introduc_area tab2_content" id="tab3">

                      @(Html.Telerik().Grid<dynamic>()
                            .Name("Grid3")
                            .Columns(c =>
                            {                
                                
                                c.Bound("Date")
                                    .Title("时间")
                                    .Format("{0:yyyy-MM-dd}");
                                
                                c.Bound("Id")
                                    .Title("订单号");

                                c.Bound("Data4")
                                    .Title("消费额扣减")
                                    .Format("-￥{0}");

                                c.Bound("Data3")
                                    .Title("消费额增加")
                                    .Format("￥{0}");


                                c.Bound("Id")
                                    .Title("备注")
                                    .ClientTemplate("订单<#=Id#>完成，增加消费额");

                            })
                            .DataBinding(binding => binding.Ajax().Select("_GetSampleData", "Sample"))
                            .Sortable()
                            .Pageable(p => p.PageSize(10))

                        )
                     
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
